import { FC, useEffect } from 'react'
import { Table, Input } from 'antd'
import axios from 'axios'
import { PlayCircleOutlined, PauseOutlined } from '@ant-design/icons'
// selfHooks
import { useSetState } from '@/hooks/index'
// stores
import { appShallowEqual, useAppSelector, useAppDispatch } from '@/stores'
import { changeSonOrPlay, setMusicList, changeSon, changePlay } from '@/stores/modules/music'
// less
import './content.less'
// 自定义方法
import { formatMilliseconds, fuzzySearchByName } from '@/untils/index'
// ts
import type { ColumnsType } from 'antd/es/table'
import { SongType } from '@/untils/musicType'
// 组件
const { Search } = Input

const MusicListContent: FC = () => {
  const columns: ColumnsType<SongType> = [
    {
      title: '',
      dataIndex: 'id',
      key: 'id',
      render: (text, record) => (
        <div style={{ cursor: 'pointer' }} onClick={() => changePlayMusic(record)}>
          {play && record.id === songId ? (
            <PauseOutlined style={{ fontSize: '1.5rem' }} />
          ) : (
            <PlayCircleOutlined style={{ fontSize: '1.5rem' }} />
          )}
        </div>
      )
    },
    {
      title: '歌曲名称',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '歌手名字',
      dataIndex: 'singerName',
      key: 'singerName'
    },
    {
      title: '专辑',
      dataIndex: 'album',
      key: 'album'
    },
    {
      title: '时间',
      key: 'durationMilliseconds',
      dataIndex: 'durationMilliseconds',
      render: (text) => <div>{formatMilliseconds(text)}</div>
    }
  ]
  const [state, setState] = useSetState<{ search: string; allData: SongType[] }>({
    search: '',
    allData: []
  })
  const dispatch = useAppDispatch()
  const { selectedKey, musicGroup, play, songId, musicList } = useAppSelector(
    (state) => ({
      musicGroup: state.musicReducer.musicGroup,
      selectedKey: state.musicReducer.selectedKey,
      play: state.musicReducer.play,
      songId: state.musicReducer.songId,
      musicList: state.musicReducer.musicList
    }),
    appShallowEqual
  )
  const getTableData = async () => {
    const res = await axios.get('http://localhost:4000/musicList')
    dispatch(setMusicList(res?.data))
    dispatch(changeSon(res?.data?.[0]?.id))
    setState({
      search: '',
      allData: res?.data || []
    })
  }
  useEffect(() => {
    if (selectedKey) getTableData()
  }, [selectedKey])
  const changePlayMusic = (record: SongType) => {
    if (record.id !== songId) {
      dispatch(changeSon(record.id))
    } else {
      dispatch(changePlay(!play))
    }
  }
  const onSearch = (value: string) => {
    const data = fuzzySearchByName(state.allData, value)
    dispatch(setMusicList(data))
    setState({
      search: value
    })
  }
  return (
    <div className="music-list-content">
      <div className="music-list-content-group">
        <img src={musicGroup.image} alt="" />
        <div className="music-list-content-group-info">
          <div>播放列表</div>
          <div className="group-name">{musicGroup.name}</div>
          <div className="create-time">创建时间：{musicGroup.time}</div>
        </div>
      </div>
      <div className="music-list-content-list">
        <Search
          placeholder="输入名称查找"
          onBlur={(e) => onSearch(e.target.value)}
          onSearch={onSearch}
          style={{ width: '100%', marginBottom: '0.5rem' }}
        />
        <div>
          <Table pagination={false} rowKey="id" columns={columns} dataSource={musicList}></Table>
        </div>
      </div>
    </div>
  )
}
export default MusicListContent
